const phones = {
    "promo-list": [
        {
            "title": "",
            "url": "https://www.mi.com/blackshark-game2/?cfrom=search",
            "thumbnail": "https://i1.mifile.cn/a4/xmad_15578089659428_Uywcg.jpg",
            "desc": "",
            "price": ""
        }
    ],
    "brick-list": {
        "phone": [
            {
                "id": "1190800033",
                "title": "小米9 6GB+128GB",
                "url": "https://item.mi.com/1190800033.html",
                "thumbnail": "https://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg",
                "desc": "骁龙855，索尼4800万超广角微距三摄",
                "price": "2999"
            },
            {
                "id": "1184200013",
                "title": "小米MIX 3 6GB+128GB",
                "url": "https://item.mi.com/1184200013.html",
                "thumbnail": "https://i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg",
                "desc": "磁动力滑盖全面屏 / 四曲面陶瓷机身",
                "price": "3299"
            },
            {
                "id": "1554694214",
                "title": "小米Play 4GB+64GB",
                "url": "https://www.mi.com/miplay-nocard/",
                "thumbnail": "https://i1.mifile.cn/a1/pms_1554694214.08887531!220x220.png",
                "desc": "八核高性能处理器，后置1200万 AI 双摄",
                "price": "799"
            },
            {
                "id": "mi8ud",
                "title": "小米8 屏幕指纹版 6GB+128GB",
                "url": "https://www.mi.com/mi8ud/",
                "thumbnail": "https://i1.mifile.cn/a1/pms_1538019009.57772743!220x220.png",
                "desc": "全球首款压感屏幕指纹 骁龙845处理器",
                "price": "1999"
            },
            {
                "id": "1183600012",
                "title": "小米8青春版6GB+64GB",
                "url": "https://item.mi.com/1183600012.html",
                "thumbnail": "https://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg",
                "desc": "潮流镜面渐变色，2400万自拍旗舰",
                "price": "1499"
            },
            {
                "id": "1185200029",
                "title": "Redmi Note 7 6GB+64G",
                "url": "https://item.mi.com/1185200029.html",
                "thumbnail": "https://i1.mifile.cn/a1/pms_1547020972.223707!220x220.jpg",
                "desc": "4800万拍照，4000mAh大电量",
                "price": "1399"
            },
            {
                "id": "redmik20pro",
                "title": "Redmi K20 Pro 6GB+128GB",
                "url": "https://www.mi.com/redmik20pro/",
                "thumbnail": "https://i1.mifile.cn/a1/pms_1558857780.47412427!220x220.jpg",
                "desc": "骁龙855旗舰处理器，索尼4800万超广角三摄",
                "price": "2599"
            },
            {
                "id": "1191000019",
                "title": "Redmi Note 7 Pro",
                "url": "https://item.mi.com/1191000019.html",
                "thumbnail": "https://i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg",
                "desc": "6GB+128GB大存储，索尼4800万拍照",
                "price": "1599"
            }
        ]
    }
}
const homeele = {
    "promo-list": [{
        "title": "",
        "url": "https://item.mi.com/1191400018.html",
        "thumbnail": "https://i1.mifile.cn/a4/xmad_15608266264545_qWIRv.jpg",
        "desc": "",
        "price": ""
    },
    {
        "title": "",
        "url": "https://item.mi.com/product/9527.html",
        "thumbnail": "https://i1.mifile.cn/a4/xmad_15608266614476_wdGNy.jpg",
        "desc": "",
        "price": ""
    }
    ],
    "brick-list": {
        "hot": [{
            "title": "米家互联网洗烘一体机 Pro 10kg",
            "url": "https://item.mi.com/1192300008.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1560161251.21862332!220x220.jpg",
            "desc": "",
            "price": "2999",
            "type": "热门"
        },
        {
            "title": "米家互联网洗烘一体机 Pro 10kg",
            "url": "https://item.mi.com/1185000014.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1545286017.38639954!220x220.jpg",
            "desc": "",
            "price": "2199",
            "type": "热门"
        },
        {
            "title": "15.6\"笔记本 i5 4G MX110",
            "url": "https://item.mi.com/1183400003.html",
            "thumbnail": "https://i1.mifile.cn/a4/xmad_15350951136177_QUuVm.png",
            "desc": "",
            "price": "4199",
            "type": "热门"
        },
        {
            "title": "13.3\"小米笔记本Air 四核i7 8G 256G MX150 银色",
            "url": "https://item.mi.com/1181300022.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1524636075.71677607!220x220.jpg",
            "desc": "",
            "price": "5999",
            "type": "热门"
        },
        {
            "title": "米家空气净化器Pro",
            "url": "https://item.mi.com/1192100024.html",
            "thumbnail": "https://i1.mifile.cn/a4/xmad_14972549116226_tZpod.png",
            "desc": "OLED 显示屏幕 / 激光颗粒物传感器",
            "price": "1299"
        },
        {
            "title": "米家无线手持擦地机",
            "url": "https://item.mi.com/1192100027.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1560324263.44264444!220x220.png",
            "desc": "地,拖地,扫地,擦地机,电动擦地,电动拖把,拖把,扫地机器人,污渍,清洁,神器,高颜值,懒人,小家电",
            "price": "1999",
            "type": "热门"
        },
        {
            "title": "米家电烤箱",
            "url": "https://item.mi.com/1192100028.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1559644554.04136931!220x220.jpg",
            "desc": "32L大容积 / 上下独立控温 / 旋转烤叉 / 热风循环 / 40°C恒温发酵 / 120分钟定时 / 支持免定时持续运行",
            "price": "299",
            "type": "热门"
        }
        ],
        "tel": [{
            "title": "小米壁画电视 65英寸",
            "url": "https://www.mi.com/arttv/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6999",
            "type": "电视影音"
        },
        {
            "title": "小米壁画电视 65英寸",
            "url": "https://www.mi.com/arttv/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6999",
            "type": "电视影音"
        },
        {
            "title": "小米壁画电视 65英寸",
            "url": "https://www.mi.com/arttv/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6999",
            "type": "电视影音"
        },
        {
            "title": "小米壁画电视 65英寸",
            "url": "https://www.mi.com/arttv/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6999",
            "type": "电视影音"
        },
        {
            "title": "小米壁画电视 65英寸",
            "url": "https://www.mi.com/arttv/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6999",
            "type": "电视影音"
        },
        {
            "title": "小米壁画电视 65英寸",
            "url": "https://www.mi.com/arttv/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6999",
            "type": "电视影音"
        },
        {
            "title": "小米壁画电视 65英寸",
            "url": "https://www.mi.com/arttv/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6999",
            "type": "电视影音"
        },
        {
            "title": "小米壁画电视 65英寸",
            "url": "https://www.mi.com/arttv/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1555935546.09711490!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6999",
            "type": "电视影音"
        }
        ],
        "computer": [{
            "title": "15.6 Pro i5 8G 1050MAX-Q 256G",
            "url": "https://item.mi.com/1183100042.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1533266333.04566853!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6299",
            "type": "电脑"
        },
        {
            "title": "15.6 Pro i5 8G 1050MAX-Q 256G",
            "url": "https://item.mi.com/1183100042.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1533266333.04566853!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6299",
            "type": "电脑"
        },
        {
            "title": "15.6 Pro i5 8G 1050MAX-Q 256G",
            "url": "https://item.mi.com/1183100042.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1533266333.04566853!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6299",
            "type": "电脑"
        },
        {
            "title": "15.6 Pro i5 8G 1050MAX-Q 256G",
            "url": "https://item.mi.com/1183100042.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1533266333.04566853!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6299",
            "type": "电脑"
        },
        {
            "title": "15.6 Pro i5 8G 1050MAX-Q 256G",
            "url": "https://item.mi.com/1183100042.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1533266333.04566853!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6299",
            "type": "电脑"
        },
        {
            "title": "15.6 Pro i5 8G 1050MAX-Q 256G",
            "url": "https://item.mi.com/1183100042.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1533266333.04566853!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6299",
            "type": "电脑"
        },
        {
            "title": "15.6 Pro i5 8G 1050MAX-Q 256G",
            "url": "https://item.mi.com/1183100042.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1533266333.04566853!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6299",
            "type": "电脑"
        },
        {
            "title": "15.6 Pro i5 8G 1050MAX-Q 256G",
            "url": "https://item.mi.com/1183100042.html",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1533266333.04566853!220x220.jpg",
            "desc": "挺时尚前卫的，电视柜没到，主机先放箱子上。谢谢雷总及...",
            "price": "6299",
            "type": "电脑"
        }
        ],
        "homelec": [{
            "title": "米家扫地机器人",
            "url": "http://www.mi.com/roomrobot/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1472609961.95298675!220x220.jpg",
            "desc": "智能路径规划，扫得干净扫得快",
            "price": "1699",
            "type": "家居"
        },
        {
            "title": "米家扫地机器人",
            "url": "http://www.mi.com/roomrobot/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1472609961.95298675!220x220.jpg",
            "desc": "智能路径规划，扫得干净扫得快",
            "price": "1699",
            "type": "家居"
        },
        {
            "title": "米家扫地机器人",
            "url": "http://www.mi.com/roomrobot/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1472609961.95298675!220x220.jpg",
            "desc": "智能路径规划，扫得干净扫得快",
            "price": "1699",
            "type": "家居"
        },
        {
            "title": "米家扫地机器人",
            "url": "http://www.mi.com/roomrobot/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1472609961.95298675!220x220.jpg",
            "desc": "智能路径规划，扫得干净扫得快",
            "price": "1699",
            "type": "家居"
        },
        {
            "title": "米家扫地机器人",
            "url": "http://www.mi.com/roomrobot/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1472609961.95298675!220x220.jpg",
            "desc": "智能路径规划，扫得干净扫得快",
            "price": "1699",
            "type": "家居"
        },
        {
            "title": "米家扫地机器人",
            "url": "http://www.mi.com/roomrobot/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1472609961.95298675!220x220.jpg",
            "desc": "智能路径规划，扫得干净扫得快",
            "price": "1699",
            "type": "家居"
        },
        {
            "title": "米家扫地机器人",
            "url": "http://www.mi.com/roomrobot/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1472609961.95298675!220x220.jpg",
            "desc": "智能路径规划，扫得干净扫得快",
            "price": "1699",
            "type": "家居"
        },
        {
            "title": "米家扫地机器人",
            "url": "http://www.mi.com/roomrobot/",
            "thumbnail": "https://i1.mifile.cn/a1/pms_1472609961.95298675!220x220.jpg",
            "desc": "智能路径规划，扫得干净扫得快",
            "price": "1699",
            "type": "家居"
        }
        ]
    }
}

Vue.component('goods-item', {
    props: {
        "goodsData": Object
    },
    template: `
    <li class="item">
        <div class="figure-img">
            <a :href="goodsData.url" target="_blank">
                <img :src="goodsData.thumbnail" :alt="goodsData.title">
            </a>
        </div> 
        <h3>
            <a href="" class="title">{{goodsData.title}}</a>
        </h3>
        <p class="desc"></p> 
        <p class="price"><span>{{goodsData.price}}</span>元</p> 
        <button>加入购物车</button>
    </li>`
})

Vue.component('brick-list', {
    props: {
        brickListData: Object
    },
    template: `
    <div class="span16 brick-list">
        <ul  
            v-for="(brickList,key,i) in brickListData"
            :key="key+i"
            :data-type="key"
            :class="{'tab-content-active':key=='hot'}"
        >
            <goods-item 
                v-for="(item,index) in brickList" 
                :key="item.thumbnail+item.id+index"
                :goods-data="item"
            >
            </goods-item>
        </ul>
    </div>
    `
})
Vue.component('promo-list', {
    props: {
        promoListData: Array
    },
    template: `
    <div class="span4 promo-list">
        <ul>
            <li class="promo-item" v-for="item in promoListData">
                <a :href="item.url">
                    <img :src="item.thumbnail" alt="">
                </a>      
            </li>
        </ul>
    </div>`
})
new Vue({
    el: '#app',
    data: {
        phones: phones,
        homeele:homeele,
        cart: [
            {
                count: 1,
                product: {
                    "id": "1191000019",
                    "title": "Redmi Note 7 Pro",
                    "url": "https://item.mi.com/1191000019.html",
                    "thumbnail": "https://i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg",
                    "desc": "6GB+128GB大存储，索尼4800万拍照",
                    "price": "1599"
                }
            }
        ]
    },
    methods: {
        buy(product) {
            //拿到商品id
            const id = product.id//1191000019
            //判断购物车里面是否存在相同的id商品
            // const p = this.cart.find(el => el.product.id == id)
            const p = this.cart.find(function (el) {
                return el.product.id == id
            })
            if (p) {
                p.count++
            } else {
                const obj = {
                    count: 1,
                    product: product
                }
                this.cart.push(obj)
            }
        },
        add(id) {
            const p = this.cart.find(function (el) {
                return el.product.id == id
            })
            p.count++
        },
        minus(id) {
            const p = this.cart.find(function (el) {
                return el.product.id == id
            })
            if (p.count >= 2) {
                p.count--
            }
        },
        remove(index) {
            this.cart.splice(index, 1)
        }
    },
    computed: {
        totalPrice() {
            let t = 0;
            this.cart.forEach(item => {
                t += item.product.price * item.count
            });
            return t
        }
    }
})